<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- <tabs-view slot="top">
			</tabs-view> -->
				<uni-search-bar :radius="100" @confirm="search" placeholder="搜你想吃的" bgColor="#FFF"></uni-search-bar>
				<view class="jingxuan">- 今日编辑精选 -</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- <view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item,index)">
				<view class="item-title">{{item.title}}</view>
				<view class="item-detail">{{item.detail}}</view>
				<view class="item-line"></view>
			</view> -->
			<view class="shouye_card">
				<HomeCard v-for="(list,index) in dataList" :list="list" :key="index"></HomeCard>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import HomeCard from '@/components/HomeCard/HomeCard.vue'
	export default {
		components:{
			HomeCard,
		},
		data() {
			return {
				lists: null,
				dataList: [],
				tabIndex: 0
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
		},
		methods: {
			search(e){
				console.log(e.value)
				uni.navigateTo({
					url: "../../pages/Search/Search?value=" + e.value,
				});
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				uni.request({
					url: `https://apis.netstart.cn/douguo/home/recommended/${pageNo*10}/10`,
					success: (res) => {
					        // console.log(res.data.result.list);
							this.lists = res.data.result.list;
							uni.hideLoading();
							const params = {
								pageNo: pageNo,
								pageSize: pageSize,
							}
							console.log(params)
								//将请求的结果数组传递给z-paging
							this.$refs.paging.complete(res.data.result.list);
					    }
				});
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		.shouye_card{
			margin: 0 25px;
		}
		.jingxuan{
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			margin-top: 10px;
		}
	}
</style>
